<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<nav-bar></nav-bar>
			<!-- <text-child></text-child> -->
			<my-com></my-com>
		</div>
		<script>
			// dom为啥没有显示提示
			// 起名字：小命名  HTML buyubxuanchuxian
			// wufazhijiefanwenwaimaindaizujian
			// 定义一个全局组件
			Vue.component('navBar',
			{
				// dom css js
				template:`<div style="background:red">
				<button @click="hua">返回</button>
				购物车
				<button @click="huaaa">逻辑</button>
				<h2>{{myname}}</h2>
				<text-child></text-child>
				<navChild></navChild>
				</div>`,
				methods:{
					hua(){
						console.log("点击了一个返回按钮")
					},
					huaaa(){
						console.log("点击一个逻辑返回")
					}
				},
				// data必须是函数的写法  要有返回return
					data(){
					return{
						myname:"张三"
					}
				},
				watch:{
					
				},
				// jubuzujian
				components:{
					"navChild":{
						template:`<div>sss</div>`
					}
				}
			})
			// 全局组件
			Vue.component('textChild',
			{
				template:`<div style="background:yellow">我是大学</div>`
			})
			var tryt={template:'sdd'}
			//根组件
			var xm=new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				},
				components:{
					"myCom":tryt
				}
			})
		</script>
	</body>
</html>